<template>
	<div class="layout-flex">
		<headerSearch @toRefresh="toRefresh" ref="headerSearchRef" :tab="props.tab" />
		<div class="layout-padding">
			<FastTableHandle @queryTable="toRefresh(false)">
				<template v-slot:rightWrapper>
					<el-icon v-if="props.tab === 'whs' && getAuth('wms_wmsInventoryLog_export')">
						<Download @click="toExport" />
					</el-icon>
					<el-icon v-if="props.tab === 'batch' && getAuth('wms_wmsInventoryBatchLog_export')">
						<Download @click="toExport" />
					</el-icon>
					<el-icon>
						<Setting @click="columnsSettingRef.openDialog()" />
					</el-icon>
				</template>
			</FastTableHandle>
			<table-layout
				v-if="headerSearchRef"
				:query-form="headerSearchRef?.queryForm"
				:fetch-list="props.tab === 'whs' ? wmsInventoryLog : wmsInventoryBatchLog"
				:header-cell-style="{ color: '#000' }"
				border
				ref="dataTableRef"
				@mouseEnterCell="(row) => (rowIdx = row.id)"
				@mouseLeaveCell="rowIdx = null"
			>
				<template v-slot:tableLayout>
					<el-table-column
						v-for="(col, ind) in columnsData[props.tab + 'LogList']"
						:key="ind"
						:label="col.name"
						:prop="col.prop"
						:fixed="col.fixed ? col.fixed : false"
						:min-width="col.width ? col.width : '140'"
						:sortable="col.sortable"
					>
						<!-- th header -->
						<template #header>
							<div v-if="col.tooltip" style="display: flex; align-items: center">
								{{ col.name }}
								<el-tooltip effect="dark" :content="col.tooltip" placement="top">
									<el-icon><InfoFilled /></el-icon>
								</el-tooltip>
							</div>
							<span v-else>{{ col.name }}</span>
						</template>
						<template v-slot="scope">
							<div v-if="scope.row[col.prop]?.split(',').length === 3" style="display: inline-flex; align-items: center; gap: 2px">
								<span style="display: inline-flex; align-items: center; gap: 2px">
									<el-icon style="color: #f56c6c; font-weight: 900" v-if="Number(scope.row[col.prop]?.split(',')[0]) > 0"><Top /> </el-icon>
									<el-icon style="color: #67c23a" v-if="Number(scope.row[col.prop]?.split(',')[0]) < 0"><Bottom /> </el-icon>
									<span>{{ Math.abs(scope.row[col.prop]?.split(',')[0]) }} | </span>
									&nbsp;
								</span>
								<span>{{ scope.row[col.prop]?.split(',')[1] }} - {{ scope.row[col.prop]?.split(',')[2] }}</span>
							</div>
							<template v-else-if="col.name === 'SKU'">
								<el-link type="primary" @click="skuDetailDialogRef.openDialog(scope.row.skuId, false, false)">{{ scope.row[col.prop] }}</el-link>
								<span v-if="scope.row[col.prop]" @click="() => copyText(scope.row[col.prop])">
									<el-icon class="text-xs cursor-pointer" v-if="rowIdx === scope.row.id">
										<DocumentCopy />
									</el-icon>
								</span>
							</template>
							<template v-else-if="col.name === '产品名称'">
								{{ scope.row[col.prop] }}
								<span v-if="scope.row[col.prop]" @click="() => copyText(scope.row[col.prop])">
									<el-icon class="text-xs cursor-pointer" v-if="rowIdx === scope.row.id">
										<DocumentCopy />
									</el-icon>
								</span>
							</template>
							<template v-else-if="col.name === '单据类型'">
								<template v-for="item in state.billTypeList">
									<span v-if="item.code === scope.row[col.prop]" :key="item.code">
										{{ item.name }}
									</span>
								</template>
							</template>
							<template v-else-if="col.name === '库存动作'">
								<template v-for="item in state.inventoryMoveTypeList">
									<span v-if="item.code === scope.row[col.prop]" :key="item.code">
										{{ item.name }}
									</span>
								</template>
							</template>
							<template v-else-if="col.name === '影响库存类型'">
								<template v-for="item in state.effectInventoryTypeList">
									<span v-if="item.code === scope.row[col.prop]" :key="item.code">
										{{ item.name }}
									</span>
								</template>
							</template>
							<template v-else-if="col.name === '业务类型'">
								<template v-for="item in state.busTypesList">
									<span v-if="item.code === scope.row[col.prop]" :key="item.code">
										{{ item.name }}
									</span>
								</template>
							</template>
							<template v-else-if="col.name === '出入库类型'">
								{{ scope.row[col.prop] === '1' ? '出库' : scope.row[col.prop] === '2' ? '入库' : '' }}
							</template>
						</template>
					</el-table-column>
				</template>
			</table-layout>
		</div>
		<ColumnsSetting
			ref="columnsSettingRef"
			@changeColumn="changeColumn"
			:allList="columns[props.tab + 'LogList']"
			:commitName="props.tab + 'LogList'"
			:list="columnsData[props.tab + 'LogList']"
		/>
		<SkuDetailDialog ref="skuDetailDialogRef" />
	</div>
</template>
<script setup lang="tsx" name="tableData">
import CommonFunction from '/@/utils/commonFunction';
const { copyText } = CommonFunction();
const rowIdx = ref(null);
import { ElMessage } from 'element-plus';
import {
	wmsInventoryLog,
	whsLogExport,
	wmsInventoryBatchLog,
	batchLogExport,
	getBillTypeMap,
	getInventoryMoveTypeArray,
	getEffectInventoryTypeArray,
	getBusTypeMap,
} from '/@/api/inventory/index';
import { Local } from '/@/utils/storage';
const ColumnsSetting = defineAsyncComponent(() => import('../../columnsSetting/index.vue'));
import { columns } from '../../columnsSetting/columns.js';
const headerSearch = defineAsyncComponent(() => import('./headerSearch.vue'));
import { auth } from '/@/utils/authFunction';
const getAuth = (value: string) => {
	return auth(value);
};
const props = defineProps({
	tab: {
		type: String,
		default: '',
	},
});
const state = reactive({
	billTypeList: [],
	inventoryMoveTypeList: [],
	effectInventoryTypeList: [],
	busTypesList: [],
});
const headerSearchRef = ref();
const dataTableRef = ref();
const columnsSettingRef = ref();
const skuDetailDialogRef = ref();
onMounted(() => {
	getBillTypeMapObj();
	getInventoryMoveTypeObj();
	getEffectInventoryTypeObj();
	getBusTypeMapObj();
});
// 业务类型
const getBusTypeMapObj = async () => {
	const { data } = await getBusTypeMap();
	state.busTypesList = data;
};
//库存动作
const getInventoryMoveTypeObj = async () => {
	const { data } = await getInventoryMoveTypeArray();
	state.inventoryMoveTypeList = data;
};
//影响库存类型
const getEffectInventoryTypeObj = async () => {
	const { data } = await getEffectInventoryTypeArray();
	state.effectInventoryTypeList = data;
};
// 单据类型
const getBillTypeMapObj = async () => {
	const { data } = await getBillTypeMap();
	state.billTypeList = data;
};
// 列设置
const columnsData = reactive({
	whsLogList: Local.get('whsLogList') || columns.whsLogList,
	batchLogList: Local.get('batchLogList') || columns.batchLogList,
});
const changeColumn = (list) => {
	columnsData[props.tab + 'LogList'] = list;
};
const toRefresh = (v) => {
	dataTableRef?.value.refresh(v);
};
const toExport = () => {
	if (props.tab === 'whs') {
		whsLogExport({ query: headerSearchRef.value?.queryForm })
			.then(() => {
				ElMessage({
					message: '库位库存流水下载中，请至【下载中心】下载查看',
					type: 'success',
				});
			})
			.catch((res) => {
				ElMessage({
					message: res.msg,
					type: 'error',
				});
			});
	} else {
		batchLogExport({ query: headerSearchRef.value?.queryForm })
			.then(() => {
				ElMessage({
					message: '批次库存流水下载中，请至【下载中心】下载查看',
					type: 'success',
				});
			})
			.catch((res) => {
				ElMessage({
					message: res.msg,
					type: 'error',
				});
			});
	}
};

defineExpose({
	toRefresh,
});
</script>
<style lang="scss" scoped>
:deep(.el-table--default .el-table__cell) {
	padding: 16px 0;
}
</style>
